import React, { useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import Crowd from '@/components/Crowd'
import Jurisdiction from '@/components/Jurisdiction'
import ElderlyCognition from '@/components/ElderlyCognition'
import MapRiskWarning from '@/components/MapRiskWarning'
import EquipmentUsage from '@/components/EquipmentUsage'
import TheTraining from '@/components/TheTraining'

import { getCrowdData, getElderData, getDeviceData } from '../../api/getEchartsData'
import { useLocation, useSearchParams } from 'react-router-dom'

export default function Demo() {
    const [result, setResult] = useState()
    const [resultElder, setResultElder] = useState()
    const [device, setDevice] = useState()
    const [searchParams, setSearchParams] = useSearchParams()

    // 通过 get 方法获取 sid 参数
    const sid = searchParams.get('sid')

    // 获取数据----用户数据+moca
    const getData = async () => {
        const res = await getCrowdData(sid)
        setResult(res)
    }

    useEffect(() => {
        getDataAll()

        //  每隔2分钟获取一次
        const timer = setInterval(() => {
            getDataAll()
        }, 120000)
        return () => clearInterval(timer)
    }, [])

    // 获取所有数据
    const getDataAll = () => {
        getData()
        getElder()
        getDevice()
    }

    // 获取数据----五大维度
    const getElder = async () => {
        const res = await getElderData(sid)
        setResultElder(res)
    }

    // 获取数据----设备信息
    const getDevice = async () => {
        const res = await getDeviceData(sid)
        setDevice(res)
    }

    //
    let screen = useRef(null)

    window.onresize = () => {
        transform()
    }

    useEffect(() => {
        transform()
    }, [])

    const transform = (x, y) => {
        screen.current.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
    }

    const getScale = (w = 1920, h = 1080) => {
        const ww = window.innerWidth / w
        const wh = window.innerHeight / h
        return ww < wh ? ww : wh;
    }


    return (
        <>
            <div className={styles.screen_container}>
                <div ref={screen} className={styles.screen}>
                    <div className={styles.top}>
                        <div className={styles.title}>老年认知能力大数据平台(巴中市)</div>
                    </div>
                    <div className={styles.body}>

                        <div className={styles.left}>

                            <div className={styles.crowd_and_jurisdiction}>
                                {/* 人群基本情况 */}
                                <Crowd res={result}></Crowd>
                                {/* 辖区认知结果 */}
                                <Jurisdiction res={result}></Jurisdiction>
                            </div>

                            {/* 老人认知评估趋势 */}
                            <ElderlyCognition res={result} resultElder={resultElder}></ElderlyCognition>

                        </div>

                        <div className={styles.right}>
                            {/* 区域性地图 + 风险预警 */}
                            <MapRiskWarning res={result}></MapRiskWarning>
                            {/* 设备使用 */}
                            <EquipmentUsage device={device}></EquipmentUsage>
                            {/* 训练情况 */}
                            <TheTraining res={result}></TheTraining>
                        </div>

                    </div>
                </div>
            </div>
        </>
    )
}
